<template>
  <q-carousel v-model="slide" :autoplay="autoplay" :class="$attrs.class || ''" :navigation="navigation && pageNum > 1"
              animated class="bg-transparent q-carousel-set" infinite swipeable transition-next="slide-left"
              transition-prev="slide-right">
    <q-carousel-slide v-for="page in pageNum" :key="page" :name="page"
                      class="row no-wrap justify-between items-end no-padding overflow-hidden q-col-gutter-x-md">
      <div v-for="(row, index) in currentPageData" :key="index" :class="classes" class="carousel-card">
        <slot :index="index" :row="row"></slot>
      </div>
      <MEmpty v-if="!data.length" classes="text-grey-1"></MEmpty>
    </q-carousel-slide>
    <template v-slot:navigation-icon="{ onClick, active }">
      <q-icon :class="active ? 'text-primary' : 'text-blue-2'" class="cursor-pointer cursor-hover q-mx-xs"
              name="maximize" @click="onClick"></q-icon>
    </template>
  </q-carousel>
</template>

<script setup>
import { computed, ref, watch } from 'vue'

const props = defineProps({
  cols: { type: Number, default: 1 }, rows: { type: Number, default: 1 }, classes: { type: String, default: '' },
  autoplay: { type: [Boolean, Number], default: true }, navigation: { type: Boolean, default: true },
  data: { type: Array, default: () => [] }
})

watch(() => props.cols, () => slide.value > pageNum.value && (slide.value = pageNum.value))
const slide = ref(1)
const cardWidth = computed(() => `${100 / (props.cols || 1)}%`)
const cardHeight = computed(() => `${100 / (props.rows || 1)}%`)
const pageNum = computed(() => Math.ceil((props.data.length || 1) / props.cols))
const currentPageData = computed(() => props.data.slice((slide.value - 1) * props.cols, slide.value * props.cols))
</script>

<style lang="scss" scoped>
.carousel-card {
  width: v-bind(cardWidth);
  height: v-bind(cardHeight);
}
</style>